<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1 @click="num=num+1">{{num}}</h1>
    </div>
<script type="module">
  import { createApp, reactive,h,onMounted,onBeforeMount,onUpdated,onBeforeUpdate,toRefs, getCurrentInstance} from './vue.esm-browser.js'
    let App={
    //     1 setup =>beforeCreate created之前
    // 2 生命周期必须下载setup里面
    // 3 this 组件实例
        setup(props,ctx){ //值
        console.warn("props",props,ctx);
          let state=reactive({num:0})
          const instance=getCurrentInstance();
          /**
           * @description: 加载之前
           * @return {*}
           */
          onBeforeMount(()=>{
            console.log("加载之前0",state.num,instance)
          });
          onMounted(()=>{
            console.log("加载之后",state.num,instance)
          });
          onBeforeUpdate(()=>{
            console.log("更新之前",state.num)
          });
          onUpdated(()=>{
            console.log("更新之后",state.num)
          });
          return {
            ...toRefs(state)
          }
        }
    }   
       createApp(App).mount("#app")
</script>
</body>
</html>
